<template>
  <div class="modify_add">
    <div class="modify_body">
      <h3>考试信息</h3>
      <div class="modify_top">
        <div class="top">
          <el-button class="modify_btn" size="small" icon="el-icon-plus" type="primary"
            @click="addModify">添加题库</el-button>
          <p>试卷总分：{{ score }}分</p>
        </div>

        <el-table :data="tableData" style="width: 100%" ref="multipleTable"
          :header-cell-style="{ background: '#f2f3f4' }">
          <el-table-column align="left" prop="date" label="题库" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.repoId" filterable placeholder="题库" @change="reoAdd($event, scope.row)">
                <el-option v-for="item in scope.row.repoList" :key="item.id" :label="item.title" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="单选数量" width="150">
            <template slot-scope="scope">
              <div style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                ">
                <el-input v-model="scope.row.radioCount" @blur="handleChange"></el-input>
                <p style="width: 50px">/{{ scope.row.totalRadio }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="单选分数">
            <template slot-scope="scope">
              <el-input v-model="scope.row.radioScore" @blur="handleChange"></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="address" label="多选数量">
            <template slot-scope="scope">
              <div
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <el-input
                  v-model="scope.row.multiCount"
                  @blur="handleChange"
                ></el-input>
                <p style="width: 50px">/{{ scope.row.totalMulti }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="多选分数">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.multiScore"
                @blur="handleChange"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="判断题数量">
            <template slot-scope="scope">
              <div
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <el-input
                  v-model="scope.row.judgeCount"
                  @blur="handleChange"
                ></el-input>
                <p style="width: 50px">/{{ scope.row.totalJudge }}</p>
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" prop="address" label="判断题分数">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.judgeScore"
                @blur="handleChange"
              ></el-input>
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="modify_body">
      <h3>考试配置</h3>
      <div class="modify_top">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="考试区县" prop="scope" v-if="this.$store.state.companyId == 441400">
            <el-select multiple v-model="ruleForm.scope">
              <el-option v-for="(item, index) in scopeTypeList" :key="index" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="this.$store.state.companyId == 441400" label="矿山类型" prop="mineType">
            <el-select v-model="ruleForm.mineType">
              <el-option v-for="(item, index) in mineTypeList" :key="index" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试模式" prop="examType">
            <el-select v-model="ruleForm.examType" @change="examinpt">
              <el-option v-for="(item, index) in examTypeList" :key="index" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择部门">
            <div class="head-container">
              <el-tree show-checkbox :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                @check="handleNodeClick" />

              <!-- <el-button class="el_btn" type="primary" @click="eninput">短信通知</el-button> -->
            </div>
          </el-form-item>


          <el-form-item label="考试名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="考试描述" prop="content">
            <el-input type="textarea" v-model="ruleForm.content"></el-input>
          </el-form-item>
          <el-form-item label="总分数" prop="totalScore">
            <el-input-number v-model="ruleForm.totalScore" :disabled="true"></el-input-number>
          </el-form-item>
          <el-form-item label="及格分" prop="qualifyScore">
            <el-input-number v-model="ruleForm.qualifyScore" :min="0" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label-width="180" label="考试时长(分钟)" prop="totalTime">
            <el-input-number v-model="ruleForm.totalTime" :min="0" :max="300"></el-input-number>
            <p style="color: red; font-size: 14px">
              注意:此时长为考试时间时长，过期自动交卷
            </p>
          </el-form-item>

          <el-form-item label="是否限期" prop="remarks">
            <el-checkbox v-model="ruleForm.timeLimit"></el-checkbox>
          </el-form-item>
          <el-form-item v-if="ruleForm.timeLimit" label="考试日期">
            <p style="color: red; font-size: 14px">
              注意:规定的日期里需要完成，后期可以延长
            </p>
            <span style="color: #606266">开始日期:</span>

            <XDDatePicker type="datetime" v-model="ruleForm.startTime"></XDDatePicker>
            <span style="margin-left: 15px"></span>
            <span style="color: #606266">结束日期：</span>

            <XDDatePicker type="datetime" v-model="ruleForm.endTime"></XDDatePicker>
          </el-form-item>
          <el-from-item>
            <el-button class="el_btn" type="primary" @click="submitForm('ruleForm')">发布</el-button>
          </el-from-item>

        </el-form>
      </div>
    </div>
    <!-- <div class="modify_body">
      <h3>权限配置</h3>
      <div class="modify_top">
        <el-radio-group v-model="radio4" size="mini" disabled>
          <el-radio label="1" border>完全公开</el-radio>
          <el-radio label="2" border>部门公开</el-radio>
        </el-radio-group>
      </div>
    </div> -->
  </div>
</template>

<script>
import { examSave, repositoryList, sendDeptSMS } from "@/api/bank";
import { getYearMateTime } from "@/utils/time.js";
import cache from '@/plugins/cache';
import { deptTreeSelect } from "@/api/system/user";
export default {
  props: ["modifyObj"],
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      ruleForm: {
        title: "",
        content: "",
        totalScore: "",
        qualifyScore: "",
        totalTime: "",
        timeLimit: false,
        startTime: "",
        endTime: "",
        createTime: "",
        repoList: [],
        examType: "",
        mineType: 1,
        resourceIds: [cache.session.getJSON('deptId')],
        scope: []
      },
      examTypeList: [
        { value: 1, name: "移动端模拟考试" },
        { value: 2, name: "移动端正式考试" },
        { value: 3, name: "电脑端模拟考试" },
        { value: 4, name: "电脑端正式考试" },
      ],
      mineTypeList: [
        { value: 1, name: "露天" },
        { value: 2, name: "地下" },
        { value: 3, name: "尾矿库" },
      ],
      repoId: null,
      score: 0,
      rules: {
        scope: [{ required: true, message: "请选择考试区县", trigger: "change" },],
        mineType: [
          { required: true, message: "请选择矿上类型", trigger: "change" },
        ],
        examType: [
          { required: true, message: "请选择考试模式", trigger: "change" },
        ],
        title: [
          { required: true, message: "考试名称不能为空", trigger: "blur" },
        ],
        content: [
          { required: true, message: "考试描述不能为空", trigger: "blur" },
        ],
        totalScore: [
          { required: true, message: "总分不能为空", trigger: "blur" },
        ],
        qualifyScore: [
          { required: true, message: "及格分不能为空", trigger: "blur" },
        ],
        totalTime: [
          { required: true, message: "考试时长不能为空", trigger: "blur" },
        ],
      },
      tableData: [],
      repositoryList: {
        pageSize: 9999,
        currentPage: 1,
        resourceIds: [cache.session.getJSON('deptId'), 100],
      },
      repoList: [],
      num: 1,
      indexId: null,
      scopeTypeList: [
        { value: 441403, name: "梅县区" },
        { value: 441422, name: "大埔县" },
        { value: 441423, name: "丰顺县" },
        { value: 441424, name: "五华县" },
        { value: 441426, name: "平远县" },
        { value: 441427, name: "蕉岭县" },
        { value: 441481, name: "兴宁市" },
        { value: 441402, name: "梅江区" },
      ],
      deptOptions: undefined,
      resourceIdsList: [],
      place: ''
    };
  },
  created() {
    this.getrepositoryList();
    this.getDeptTree()
  },
  methods: {
 
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 节点单击事件
    handleNodeClick(a, b) {
      console.log(a, b);

      let bj = [];
      if (b.checkedKeys.length != 0) {
        this.resourceIdsList = b.checkedKeys;
      }
      this.ruleForm.scope = this.resourceIdsList;

    },
    submitForm(formName) {
      this.tableData.forEach((item) => {
        delete item.totalJudge;
        delete item.totalMulti;
        delete item.totalRadio;
        delete item.repoList;
        delete item.id;
      });
      this.ruleForm.repoList = this.tableData;
      this.ruleForm.scope = this.ruleForm.scope.toString();
      let data = new Date().valueOf();
      this.ruleForm.createTime = getYearMateTime(data);
      if(this.ruleForm.startTime=="" && this.ruleForm.endTime==""){
        this.ruleForm.startTime = getYearMateTime(data);
      this.ruleForm.endTime = "2025-01-01 00:00:00";
      }
     

      this.$refs[formName].validate((valid) => {
        if (valid) {
          examSave(this.ruleForm).then((res) => {
            if (res.success) {
              this.score = 0;
              this.$emit("onShow", 1);

            } else {
              this.$message({
                message: "添加失败",
                type: "warning",
              });
              this.$emit("onShow", 2);
              this.score = 0;
            }
          });
        } else {
          return false;
        }
      });
    },
    handleChange(e) {
      // if (e == 1) {
      this.score = 0;
      this.tableData.map((item) => {
        this.score +=
          item.radioCount * item.radioScore +
          item.multiCount * item.multiScore +
          item.judgeCount * item.judgeScore;
      });

      this.ruleForm.totalScore = this.score;
      // }
    },
    reoAdd(e, v) {
      console.log(v);
      this.repositoryList.id = v.repoId;
      repositoryList(this.repositoryList).then((res) => {
        v.totalJudge = res.data.list[0].totalJudge;
        v.totalMulti = res.data.list[0].totalMulti;
        v.totalRadio = res.data.list[0].totalRadio;
      });
    },
    del(e) {
      this.tableData.forEach((item, index) => {
        if (item.id === e.id) {
          this.tableData.splice(index, 1);
        }
      });
    },
    addModify() {
      let obj = {
        repoList: this.repoList,
        radioCount: 0,
        totalRadio: 0,
        radioScore: 0,
        multiCount: 0,
        totalMulti: 0,
        multiScore: 0,
        judgeCount: 0,
        totalJudge: 0,
        judgeScore: 0,
        repoId: null,
        id: this.num++,
      };
      this.tableData.push(obj);
    },
    getrepositoryList() {
      repositoryList(this.repositoryList).then((res) => {
        console.log(res);
        this.repoList = res.data.list;
        if (Object.keys(this.$props.modifyObj).length != 0) {
          let obj = { ...obj, ...this.$props.modifyObj };
          console.log(obj);
          this.ruleForm.title = obj.title;
          this.ruleForm.content = obj.content;
          this.ruleForm.totalScore = obj.totalScore;
          this.ruleForm.qualifyScore = obj.qualifyScore;
          this.ruleForm.totalTime = obj.totalTime;
          this.ruleForm.timeLimit = obj.timeLimit;
          this.ruleForm.createTime = obj.createTime;
          this.tableData = obj.repoList;
          this.ruleForm.endTime = obj.endTime;
          this.ruleForm.startTime = obj.startTime;
          this.ruleForm.examId = obj.examId;
          this.score = obj.totalScore;
          this.ruleForm.examType = obj.examType;
          this.ruleForm.scope = obj.scope.split(',');
          this.tableData = this.tableData.map((item) => {
            return Object.assign(item, { repoList: this.repoList });
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.modify_add {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  overflow: auto;

  .modify_body {
    &:nth-child(1)>.modify_top>.top {
      display: flex;
      justify-content: space-between;

      p {
        font-weight: bold;
        color: rgb(255, 0, 0);
        font-size: 20px;
      }
    }

    h3 {
      font-size: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .modify_top {
      padding: 20px;
      border-radius: 4px;
      border: 1px solid #e6ebf5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      .modify_btn {
        margin-bottom: 20px;
      }
    }
  }

  .el_btn {
    margin-top: 10px;
  }
}
</style>
